<template>
  <div :class="$style.autoCompolete" v-show="isShow">
    <div :class="$style.item" :key="item" v-for="item in emailArray" @click="select(`${prefix}@${item}`)">
      {{prefix}}@{{item}}
    </div>
  </div>
</template>

<script>
const emailArray =
'gmail.com,outlook.com,hotmail.com,mail.com,yahoo.com,aol.com,zoho.com,yandex.com,inbox.com,gmx.com'.split(',')
// const matchMailReg = /^\w+@/

export default {
  name: 'autoCompolete',
  props: {
    inputText: String,
  },
  data() {
    return {
      isShow: false,
      emailArray,
      prefix: '',
    }
  },
  watch: {
    inputText(val, old) {
      if (val && Math.abs(val.length - old.length) === 1) {
        this.isShow = true
        const arr = val.split('@')
        this.prefix = arr[0]
        const suffix = arr[1]
        if (suffix !== undefined) {
          this.emailArray = emailArray.filter(item => item.includes(suffix))
        }
      } else {
        this.isShow = false
      }
    },
  },
  methods: {
    select(val) {
      this.isShow = false
      this.$emit('on-select', val)
    },
  },
}
</script>

<style lang="scss" module>
.autoCompolete {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  border: 1px solid  #9B9B9B;
  border-radius: 4px;
  padding: 0 12px;
  text-align: left;
  height: 200px;
  overflow-y: scroll;
}

.item {
  line-height: 48px;
  color: #9B9B9B;
}
</style>
